* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.left-top,
.left-middle,
.left-bottom,
.middle-top,
.right-top,
.right-middle,
.right-bottom,
.middle-box2-1,
.middle-box2-2,
.middle-box1{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(30, 30, 30, 0.12));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.3s ease;
}

.left-top:hover,
.left-middle:hover,
.left-bottom:hover,
.middle-top:hover,
.right-top:hover,
.right-middle:hover,
.right-bottom:hover,
.middle-box2-1:hover,
.middle-box2-2:hover,
.middle-box1:hover,
.middle-box1:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(40, 40, 40, 0.15));
    color: #eee;
}

.container {
    display: flex;
    width: 100%;
}

body {
    background-image: url('../png/xinyang-Map.png'), url('../png/beijing.png');
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.left,
.middle,
.right {
    height: 100vh;
}

.left,
.right {
    width: 32%;
}

.middle {
    width: 34%;
}

.middle-box1,
.middle-box2{
    height: 10%;
}

.middle-box2{
    display: flex;
    flex-direction: row;
}

#average-max-temp,
#average-min-temp{
    font-size: 1.8vw;
    color: #9c9c9c;
    margin: 0.5%;
}

.middle-box2-1,
.middle-box2-2{
    width: 50%;
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 2vw;
    color: #9c9c9c;
    margin: 0.5%;
}

.left-top:active ,
.left-middle:active ,
.left-bottom:active ,
.middle-top:active ,
.right-top:active ,
.right-middle:active ,
.right-bottom:active ,
.middle-box2-1:active ,
.middle-box2-2:active ,
.middle-box1:active {
    background-color: rgba(255, 255, 255, 0.3); /* 点击时改变背景颜色 */
}
.left-top,
.left-middle,
.left-bottom{
    height: 32%;
}

.middle-top {
    height: 10%;
    color: rgb(225, 225, 225);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    display: flex;
    justify-content: center;
}

.middle-middle {
    height: 86%;

}

.right-top,
.right-middle,
.right-bottom {
    height: 32%;
}

.blank {
    height: 0.7%;
    width: 0.3%;
}

.left-top {
    /* 文字居中 */
    display: flex;
    flex-wrap: wrap;
    /* 换行排列 */
    gap: 3%;
    /* 块之间间距 */
    padding: 3%;
    background: rgba(255, 255, 255, 0.2);
    /* 半透明背景 */
    backdrop-filter: blur(8px);
    /* 磨砂玻璃效果 */
    border-radius: 10px;

    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    font-size: 0.8vw;
}

.weather-day {
    /* 固定宽度100px，防止拉伸 */
    flex: 0 0 20%; 
    /* 固定高度，形成小方形 */
    height: 40%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.404);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #000000;
    text-align: center;
    padding: 8px;
        img {
        width: 2vw; /* 使用视口宽度单位设置图片宽度 */
        height: auto; /* 保持图片比例 */
    }
}